/* ==================
          边框
 ==================== */

/* -- 实线 -- */

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.solids,
.solids-top,
.solids-right,
.solids-bottom,
.solids-left,
.dashed,
.dashed-top,
.dashed-right,
.dashed-bottom,
.dashed-left {
    position: relative;
}

.solid::after,
.solid-top::after,
.solid-right::after,
.solid-bottom::after,
.solid-left::after,
.solids::after,
.solids-top::after,
.solids-right::after,
.solids-bottom::after,
.solids-left::after,
.dashed::after,
.dashed-top::after,
.dashed-right::after,
.dashed-bottom::after,
.dashed-left::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
}

.solid::after {
    border: 1*1upx solid $tl-border-1px-color;
}

.solid-top::after {
    border-top: 1*1upx solid $tl-border-1px-color;
}

.solid-right::after {
    border-right: 1*1upx solid $tl-border-1px-color;
}

.solid-bottom::after {
    border-bottom: 1*1upx solid $tl-border-1px-color;
}

.solid-left::after {
    border-left: 1*1upx solid $tl-border-1px-color;
}

.solids::after {
    border: 8*1upx solid #eee;
}

.solids-top::after {
    border-top: 8*1upx solid #eee;
}

.solids-right::after {
    border-right: 8*1upx solid #eee;
}

.solids-bottom::after {
    border-bottom: 8*1upx solid #eee;
}

.solids-left::after {
    border-left: 8*1upx solid #eee;
}

/* -- 虚线 -- */

.dashed::after {
    border: 1*1upx dashed #ddd;
}

.dashed-top::after {
    border-top: 1*1upx dashed #ddd;
}

.dashed-right::after {
    border-right: 1*1upx dashed #ddd;
}

.dashed-bottom::after {
    border-bottom: 1*1upx dashed #ddd;
}

.dashed-left::after {
    border-left: 1*1upx dashed #ddd;
}

/* -- 阴影 -- */
.shadow[class*='white'] {
    --ShadowSize: 0 1 upx 6 upx;
}

.shadow-lg {
    --ShadowSize: 0 40 upx 100 upx 0;
}

.shadow-warp {
    position: relative;
    box-shadow: 0 0 10*1upx rgba(0, 0, 0, 0.1);
}

.shadow-warp:before,
.shadow-warp:after {
    position: absolute;
    content: "";
    top: 20*1upx;
    bottom: 30*1upx;
    left: 20*1upx;
    width: 50%;
    box-shadow: 0 30*1upx 20*1upx rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
    z-index: -1;
}

.shadow-warp:after {
    right: 20*1upx;
    left: auto;
    transform: rotate(3deg);
}

.shadow-blur {
    position: relative;
}

.shadow-blur::before {
    content: "";
    display: block;
    background: inherit;
    filter: blur(10*1upx);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 10*1upx;
    left: 10*1upx;
    z-index: -1;
    opacity: 0.4;
    transform-origin: 0 0;
    border-radius: inherit;
    transform: scale(1, 1);
}


//扩展

.sm-border.solid::after,
.sm-border.solid-top::after,
.sm-border.solid-right::after,
.sm-border.solid-bottom::after,
.sm-border.solid-left::after,
.sm-border.solids::after,
.sm-border.solids-top::after,
.sm-border.solids-right::after,
.sm-border.solids-bottom::after,
.sm-border.solids-left::after,
.sm-border.dashed::after,
.sm-border.dashed-top::after,
.sm-border.dashed-right::after,
.sm-border.dashed-bottom::after,
.sm-border.dashed-left::after {
    left: 15*2upx;
    width: calc(200% - 120upx);
}

.lsm-border.solid::after,
.lsm-border.solid-top::after,
.lsm-border.solid-right::after,
.lsm-border.solid-bottom::after,
.lsm-border.solid-left::after,
.lsm-border.solids::after,
.lsm-border.solids-top::after,
.lsm-border.solids-right::after,
.lsm-border.solids-bottom::after,
.lsm-border.solids-left::after,
.lsm-border.dashed::after,
.lsm-border.dashed-top::after,
.lsm-border.dashed-right::after,
.lsm-border.dashed-bottom::after,
.lsm-border.dashed-left::after {
    left: 15*2upx;
    width: calc(200% - 60upx);
}
